

<template>
  <div class="historicalRankings">
    <div class="banner_img">
      <img src="/imgs/wallet/goldleaderboard.webp" alt="">
    </div>
    <div class="select">
      <select-item @change="changeSelect" :active="active" :options="options"/>
    </div>

    <div class="ranking">
      <div class="two last">
        <div class="crown">
          <img :src="`/imgs/head_icons/${freeLootRankingData.two.head_icon}.webp`" alt="">
        </div>
        <div class="step">
          <p>{{ freeLootRankingData.two.username || '--' }}</p>
          <p style="margin: 4px 0 2px; color: rgba(228, 57, 57, 1);">{{ freeLootRankingData.two.score || '--' }}</p>
          <p>
            <span>{{ t('free_loot_ranking_award') }}：</span>
            <span style="color: rgba(255, 159, 105, 1);">{{ freeLootRankingData.two.reward || '--' }}</span>
          </p>
        </div>
      </div>

<!--      1-->
      <div class="one">
        <div class="crown">
          <img :src="`/imgs/head_icons/${freeLootRankingData.one.head_icon}.webp`" alt="">
        </div>
        <div class="step">
          <p>{{ freeLootRankingData.one.username || '--' }}</p>
          <p style="margin: 4px 0 2px; color: rgba(228, 57, 57, 1);">{{ freeLootRankingData.one.score || '--' }}</p>
          <p>
            <span>{{ t('free_loot_ranking_award') }}：</span>
            <span style="color: rgba(255, 159, 105, 1);">{{ freeLootRankingData.one.reward || '--' }}</span>
          </p>
        </div>
      </div>

<!--      3-->
      <div class="three last">
        <div class="crown">
          <img :src="`/imgs/head_icons/${freeLootRankingData.three.head_icon}.webp`" alt="">
        </div>
        <div class="step">
          <p>{{ freeLootRankingData.three.username || '--' }}</p>
          <p style="margin: 4px 0 2px; color: rgba(228, 57, 57, 1);">{{ freeLootRankingData.three.score || '--' }}</p>
          <p>
            <span>{{ t('free_loot_ranking_award') }}：</span>
            <span style="color: rgba(255, 159, 105, 1);">{{ freeLootRankingData.three.reward || '--' }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="rankingTab" v-if="freeLootRankingData.list.length" >
      <div class="item" v-for="(item, index) in freeLootRankingData.list" :key="index">
        <div class="indexes">{{ item.rank === -1 ? '--' : item.rank || '--' }}</div>
        <div class="user">
          <img :src="`/imgs/head_icons/${item.head_icon}.webp`" alt="">
          <span>{{item.username || '--'}}</span>
        </div>
        <div class="gold">
          <p style="color: rgba(228, 57, 57, 1);">{{item.score || '--'}}</p>
        </div>
        <div class="award">
          <span>{{ t('free_loot_ranking_award') }}：</span>
          <span style="color: rgba(255, 159, 105, 1);">{{item.reward || '--'}}</span>
        </div>
      </div>
    </div>
    <nut-button class="btn_more" round block v-if="freeLootRankingData.list.length" @click="loadingMore">
      {{ t('free_loot_ranking_button_load_more') }}
    </nut-button>


  </div>


</template>

<script setup lang="ts">

import SelectItem from "@/components/SelectItem.vue";
import {onBeforeMount, onMounted, onUnmounted, reactive, ref} from "vue";
import {useI18n} from "vue-i18n";
import {MessageEvent2} from "@/net/MessageEvent2.ts";
import {NetMsgType} from "@/netBase/NetMsgType.ts";
import {NetPacket} from "@/netBase/NetPacket.ts";
import H5Websocket from "@/net/Net1.ts";

const {t} = useI18n();

const active: any = ref('请选择')

const options = ref(getLast30Days())

const loadingMore = () => {
  freeLootRankingData.page = freeLootRankingData.page++
  freeTreasureHis()
}

const changeSelect = (e: any) => {
  active.value = e
  freeTreasureHis()
}

// 30日
function getLast30Days(): { value: number; label: string }[] {
  const result: { value: number; label: string }[] = [];
  const today = new Date();

  for (let i = 0; i < 30; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() - i);

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
    const day = String(date.getDate()).padStart(2, '0');

    const formattedDate = `${year}${month}${day}`; // 格式化为 YYYYMMDD
    result.push({ value: Number(formattedDate), label: `${formattedDate}期` });
  }
  active.value = result[0].value

  return result;
}


const freeLootRankingData: any = reactive({
  list: [],
  one: {},
  two: {},
  three: {},
  page: 1,
  pageSize: 10,
  roundid: 0
})

// 获取 排名信息
const handleGoldTable = (res: any) => {

  console.log('handleGoldTable');
  // if (data.length === 1) return (freeLootRankingData.list = []);
  // if (freeLootRankingData.page !== 1)
  //   return freeLootRankingData.list.push([...data]);
  if (freeLootRankingData.page === 1) {
    freeLootRankingData.one = res.info[0] || {}
    freeLootRankingData.two = res.info[1] || {}
    freeLootRankingData.three = res.info[2] || {}
    freeLootRankingData.list = res.info.slice(3)
  } else {
    freeLootRankingData.list = Object.assign(freeLootRankingData.list, res.info)
  }


};

const freeTreasureHis = () => {
  freeLootRankingData.roundid = active.value;
  const req = NetPacket.req_free_treasure_his();
  req.page = freeLootRankingData.page;
  req.pageSize = freeLootRankingData.pageSize;
  req.roundid = freeLootRankingData.roundid;
  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(
      NetMsgType.msgType.msg_notify_free_treasure_his,
      handleGoldTable,
  );
};


onBeforeMount(() => {
  freeTreasureHis()
})

onMounted(() => {
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_free_treasure_his, handleGoldTable)

})

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_free_treasure_his, null)



})


</script>

<style scoped lang="scss">
.historicalRankings {
  margin-top: 24px;
  padding-bottom: 30px;
  .banner_img {
    width: 307px;
    height: 29px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .select {
    width: 307px;
    height: 44px;
    margin: 16px auto 0;
  }
  .ranking {
    display: flex;
    justify-content: center;
    & > div {
      .crown {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 60%;
          height: 60%;
          position: relative;
          z-index: -1;
        }
      }
      .step {
        color: #fff;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        background-size: 100%;
        text-align: center;
        padding-top: 10px;
        margin-top: -5px;
      }
    }
    .one {
      width: 90px;
      height: 194px;
      margin: 20px 18px 0;
      .crown {
        width: 90px;
        height: 90px;
        background: url("/imgs/wallet/goldleaderboard_1.webp") no-repeat center ;
      }
      .step {
        width: 90px;
        height: 106px;
        background: url("/imgs/wallet/goldleaderboard_step_1.webp") no-repeat center;

      }
    }
    .two {

      .crown {
        background: url("/imgs/wallet/goldleaderboard_2.webp") no-repeat center ;
      }
    }
    .three {
      .crown {
        background: url("/imgs/wallet/goldleaderboard_3.webp") no-repeat center ;
      }
    }
    .last {
      margin-top: 50px;
      width: 90px;
      height: 164px;
      .crown {
        width: 90px;
        height: 85px;
      }
      .crown {
        img {
          transform: translateY(5px);
        }
      }
      .step {
        width: 90px;
        height: 76px;
        background: url("/imgs/wallet/goldleaderboard_step_2.webp") no-repeat center;
      }
    }
  }
  .rankingTab {
    width: 307px;
    margin: 0 auto;
    .item {
      font-size: 12px;
      padding: 0 16px 0 21px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      .indexes {
        color: #fff;
        font-weight: bold;
      }
      .user {
        width: 100px;
        display: flex;
        align-items: center;
        margin: 0 25px 0 15px;
        span {
          white-space: nowrap;
        }
      }
      .gold {
        margin-right: 21px;
      }
      .award {
        width: 74px;
      }
      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
    .item:nth-of-type(1) {
      border-radius: 8px 8px 0 0;
    }
    .item:last-child {
      border-radius: 0 0 8px 8px;
    }
    .item:nth-of-type(n) {
      background-color: rgb(29 28 60);
    }
    .item:nth-of-type(2n) {
      background-color: rgb(27 31 75);
    }
  }
  .btn_more {
    width: 320px;
    height: 40px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(198, 196, 245, 1);
    margin: 10px auto 0;
    border-radius: 8px;
    border: none;
    box-shadow: 0.5px 0.5px 1px 0px rgba(75, 74, 110, 1) inset;

    background-color: rgba(40, 39, 71, 1);
  }


}


</style>
